<template>
    <div>
        <el-card style="width: 700px;margin: auto;">
            <div slot="header" class="clearfix">
                <span>编辑住户</span>
            </div>
            <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="95px">
                <!-- <el-form-item label="关联房屋" prop="howMany">
                    <el-select v-model="ruleForm.howMany" placeholder="请选择">
                        <el-option label="普通住宅" value="1"></el-option>
                        <el-option label="商业用地" value="2"></el-option>
                        <el-option label="商住两用" value="3"></el-option>
                        <el-option label="其他" value="4"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="住户姓名" prop="userName">
                    <el-input v-model="ruleForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="住户编号" prop="userNumber">
                    <el-input v-model="ruleForm.userNumber"></el-input>
                </el-form-item>
                <el-form-item label="住户性别" prop="sex">
                    <el-radio-group v-model="ruleForm.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="证件类型" prop="type">
                    <el-select v-model="ruleForm.type" placeholder="请选择">
                        <el-option label="身份证" value="身份证"></el-option>
                        <el-option label="港澳通行证" value="港澳通行证"></el-option>
                        <el-option label="护照" value="护照"></el-option>
                        <el-option label="其他" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证据号码" prop="idCard">
                    <el-input v-model="ruleForm.idCard"></el-input>
                </el-form-item>
                <el-form-item label="与业主关系" prop="relationShip">
                    <el-select v-model="ruleForm.relationShip" placeholder="请选择">
                        <el-option label="本人" value="本人"></el-option>
                        <el-option label="亲戚" value="亲戚"></el-option>
                        <el-option label="朋友" value="朋友"></el-option>
                        <el-option label="租户" value="租户"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <!-- <el-form-item label="小区图片">
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false" :on-success="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item> -->
                <el-form-item label="身份证照" prop="fileUrl">
                    <el-upload action="http://localhost:80/housingestate/community/upload" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="checkCard">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!-- <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog> -->
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateResident">提交</el-button>
                    <el-button @click="$router.push('/workbench')">返回</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {

    data() {
        return {
            dialogImageUrl: "",
            dialogVisible: "",
            ruleForm: {
                // howMany:"",
                userName: "",
                userNumber: "",
                sex: "",
                type: "",
                idCard: "",
                relationShip: "",
                phone: "",
                fileUrl: "",
                remark: "",
            },
            rules: {
                userName: [
                    { required: true, message: '请输入住户名称', trigger: 'blur' },
                ],
                userNumber: [
                    { required: true, message: '请输入住户编号', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }

                ],
                type: [
                    { required: true, message: '请选择证件类型', trigger: 'change' }
                ],
                idCard: [
                    { required: true, message: '请输入证件号', trigger: 'blur' }
                ],
                relationShip: [
                    { required: true, message: '请选择与业主的关系', trigger: 'change' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' }
                ],
                fileUrl: [
                    { required: true, message: '上传身份证照', trigger: 'change' }
                ],
                // remark: [
                //     { required: true, message: '请输入车辆数量', trigger: 'blur' }
                // ]
            }
        }
    },
    created() {
        this.ruleForm = this.$route.query.paramName
    },
    methods: {
        updateResident() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    // debugger
                    this.$axios
                        .post("systemuser/user/updateResident", this.ruleForm)
                        .then(res => {
                            if (res.data.code == 20000) {
                                this.$message({
                                    type: 'success',
                                    message: "提交成功"
                                })
                                this.$router.push('/workbench')
                            } else {
                                this.error = res.data.data.error
                                this.$message({
                                    type: 'error',
                                    message: this.error
                                })
                            }
                        });
                }

            })
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
            console.log(file)
        }, handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        checkCard(file) {
            this.ruleForm.fileUrl = file
            console.log(file)
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>